<template>
  <div id="app">
    <el-container>
      <el-aside width="300px">
        <!--体重表-->
        <WeightTable :weight-data="weightData"/>
        <!-- 相关操作-->
        <AddNewRecord v-on:reload-data="reloadWeightData"/>
      </el-aside>
      <el-main>
        <!--体重图 -->
        <MyChart :weight-data="weightData"/>
      </el-main>
    </el-container>
  </div>
</template>

<script>
//导入组件
import MyChart from "./components/MyChart";
import WeightTable from "@/components/WeightTable";
import AddNewRecord from "@/components/AddNewRecord";
//导入数据访问函数库
import DataAccess from "@/functions/DataAccess";

export default {
  name: 'App',
  components: {
    WeightTable,
    MyChart,
    AddNewRecord
  },
  data: function () {
    return {
      //体重数据
      weightData: []
    }
  },
  methods: {
    //重新载入数据
    reloadWeightData: function () {
      DataAccess.getWeightData().then((response) => {
        this.weightData = response.data;
      }).catch((error) => {
        console.log(error);
      });
    }
  },
  mounted() {
    //挂载后首次加载数据
    this.reloadWeightData();
  }
}
</script>

<style>
#app {

}
</style>
